<template>
  <div class="app-container">
    <el-card class="tree-card">
      <!-- 用了一个行列布局显示公司信息 -->
      <TreeTools :node-data="companyInfo" :is-company="true" @addDepts="addDepts" />
      <!-- 分割线 -->
      <hr>
      <!-- 部门树形结构 -->
      <!-- el-tree 接收 data 数组作为遍历的树形数据, default-expand-all 设定默认展开所有节点 -->
      <el-tree
        :data="depts"
        :default-expand-all="true"
        :expand-on-click-node="false"
        :props="{label: 'name'}"
      >
        <template v-slot="scoped">
          <!-- 这里就是可以自定义每个节点显示的位置
          这里写的是模板, 只需要写一次, 外层 el-tree
          进行数组遍历, 每个节点都用这个模板渲染一次 -->
          <TreeTools
            :node-data="scoped.data"
            :is-company="false"
            @addDepts="addDepts"
            @reloadPage="loadPage"
            @editDepts="editDepts"
          />
        </template>
      </el-tree>
    </el-card>
    <AddDepts ref="addDepts" :is-show-dialog.sync="isShowDialog" :node-data="nodeData" @reloadPage="loadPage" />
  </div>
</template>

<script>
import { getDeptsList } from '@/api/departments'
import TreeTools from './components/tree-tools.vue'
import AddDepts from './components/add-depts.vue'
import { listToTreeData } from '@/utils'
export default {
  components: {
    TreeTools,
    AddDepts
  },
  data() {
    return {
      // 由于公司已经用组件进行渲染,
      // 又要求有 nodeData 对象
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      // 演示树形部门数据
      depts: [],
      isShowDialog: false,
      nodeData: {}
    }
  },
  async created() {
    this.loadPage()
  },
  methods: {
    async loadPage() {
      const { depts } = await getDeptsList()
      // 这里拿到的数据是以 pid 的形式进行处理, 树形结构则是要求用 children 的形式进行嵌套
      // 所以要改造数据
      // 空字符串是跟后端约定的顶级部门 pid
      // 第一层筛选的都是 pid === ''
      this.depts = listToTreeData(depts, '')
    },
    addDepts(nodeData) {
      this.isShowDialog = true
      this.nodeData = nodeData
    },
    async editDepts(nodeData) {
      // 还需要通知弹窗回显数据
      // 父组件调用子组件的函数,只需要触发 ref 获取组件实例即可
      // 为了避免闪烁, 应该等待这个异步数据获取完毕再弹窗
      // 所有被 async await 标记的异步函数, 都是 promise
      // 都可以再次 await
      await this.$refs.addDepts.getDeptsDetail(nodeData)
      // 这里是父页面接到通知
      // 需要弹窗, 于是将变量设为 true
      this.isShowDialog = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
